<script setup>
import GoBackAndSearchNav from "@/components/GoBackAndSearchNav.vue";
import {ref, onBeforeMount} from "vue";
import {getCommentById} from "@/api/product.js";
import useAccountStore from "@/store/modules/AccountStore.js";
import Null from "@/components/Null.vue";
import ProductComment from "@/views/product/components/ProductComment.vue";
import useProductStore from "@/store/modules/ProductStore.js";
import {useRouter} from 'vue-router'
import {MY_COMMENT_DETAIL_ROUTE} from "@/router/routes/my/MyCommentDetail.js";

const router = useRouter()

const commentList = ref([])
const getComment = async () => {
  commentList.value = await getCommentById(null, useAccountStore().user.id)
}
onBeforeMount(() => {
  getComment()
})

const goCommentDetail = (comment) => {
  useProductStore().saveComment(comment)
  router.push({name: MY_COMMENT_DETAIL_ROUTE})
}
</script>

<template>
  <div class="my-comment">
    <GoBackAndSearchNav :title="'我的评论'" :placeholder="true"></GoBackAndSearchNav>
    <Null v-if="commentList.length <= 0"></Null>
    <ProductComment
        v-for="item in commentList"
        :comment="item"
        @click="goCommentDetail(item)"
    ></ProductComment>
  </div>
</template>

<style scoped lang="scss">

</style>